Environnement de développement Pour aller plus loin dans la programmation Web, il est important de maîtrise le langage JavaScriptAttention à ne pas confondre Java et JavaScript !! Aucun lien de parenté !. Ce langage permet de rendre les pages dynamiques comme l'explique avec vigueur la programmeuse de cet extrait d'anime :

Avant même de commencer la programmation, nous présentons ici quelques outils et solutions pour programmer efficacement en JavaScript. D'autres solutions existent, et nous ne prétendons détenir la meilleur. Pour autant elle réunit quelques conditions suffisantes à un travail agréable : L'ensemble formera ce que l'on appelle notre environnement de développement qui encadre les allers-retours que nous effectuerons en tant que programmeur entre le programme et son rendu dans la page web.
Une page web peut se résumer au minimum en un unique fichier .html.

A l'intérieur de ce fichier textuel, il est possible d'inclure :

Même si il est possible de gérer son site de cette manière, ce n'est pas une bonne idée car :
  • le fichier peut vite devenir très long et le programmeur finira par se sentir perdu dans son propre code
  • les éditeurs de développement (partie suivante) sont généralement adaptés à un langage unique et ne rempliront par leur rôle éclairant sur trois langages à la fois (HTML, CSS, JavaScript).
  • Lorsque l'on travaille sur la CSS, par exemple, on n'a pas besoin de voir le code JavaScript et inversement.
  • les messages d'erreurs (parties suivantes) permettant de déboguer un programme ne renverront pas à la bonne ligne
Pour toutes ces raisons, il est important de séparer chacun des langages dans des fichiers séparés.

Les chemins vers la feuille de style Feuille de style : nom donné au fichier .css et le script sont donnés par les attributs href et src. Le chemin peut aussi être une adresse internet (utile pour utiliser le script ou le style d'un autre site mais c'est une mauvaise idée en général).
  • Commencez par créer un dossier Mon site à l'intérieur duquel vous allez placer les trois fichiers à télécharger ici.
  • Visualisez ensuite le site mon_site.html avec le navigateur FirefoxClic-droit sur le fichier "mon_site.html", puis "Ouvrir avec" et choisir "Firefox".
Notepad++ est un éditeur de texte libre générique adapté à de nombreux langages de programmations. Il propose notamment :
  • la coloration syntaxiqueColoration syntaxique : les différentes parties du code (variables, fonctions, balises,etc.) sont reconnues et colorées par l'éditeur pour rendre la lecture plus intuitive de code pour le HTML, le CSS et le JavaScript (entre autres)
  • la numérotation des lignes et des colonnes pour repérer rapidement les erreurs indiquées par le débogueur
  • un système d'autocomplétionL éditeur essaye de deviner la fin des mots que vous tapez pour accélérer la saisie permettant notamment de fermer les balises HTML (très pratique).
  • l'exécution rapide de programmes et des raccourcis
 TextWrangler est un équivalent Mac, et SciTE un équivalent Linux. Bien sûr, de nombreuses autres alternatives existent, plus ou moins élaborées.
  • Editez Pour éditer un fichie avec notepad++ : faire clic-droit sur le fichier à ouvrir, puis "Ouvrir avec Notepad++" les trois fichiers mon_site.html, mon_style.css et mon_script.js.
  • Modifiez le titre dans le fichier mon_site.html et sauvegardez Pour sauvegarder : faire "Fichier" puis "Enregistrer" ou utiliser le raccourci clavier "Ctrl + S")
  • Vous pouvez visualiser le résultat dans le navigateur en Rafraîchissant la page à l'aide du bouton REFRESH ou avec F5
  • Il est aussi possible de lancer directement Firefox depuis Notepad++ à l'aide du menu Exécution puis Launch with Firefox
Normalement, le langage est détecté automatiquement. Si ce n'est pas le cas (par exemple si le fichier contient plusieurs langages), il est possible de le sélectionner dans le menu Langage.
  • Vérifiez que pour chacun des trois fichiers le langage est correctement détecté dans le menu langage (pour les trois fichiers HTML, CSS et JavaScript).

  • Vérifiez que pour le HTML l'autocomplétion ferme automatiquement les balises (sinon activez l'option Autoclose dans le menu TextFX puis TextFX Settings)

Raccourcis Claviers

Les raccourcis les plus utiles en programmation sont bien sûr Ctrl+C et Ctrl+V pour Copier et Coller. Il est également pratique de Couper avec Ctrl+X. Il y a aussi Alt-Tabulation qui permet de passer rapidement d'une fenêtre à une autre (de l'éditeur au navigateur quand on programme).

Pour passer de l'éditeur au navigateur, certains programmeurs apprécient de séparer l'écran en deux en faissant glisser l'éditeur à gauche, et le navigateur à droite de l'écran (la séparation se fait automatiquement). Notepad++ propose quelques raccourcis supplémentaires très utiles à essayer si vous ne les connaissez pas ;
  • Duppliquer une ligne : Ctrl + d
  • Sélectionner du texte sans la souris : Shift + flèches directionnelles
  • Décaler une ou plusieurs lignes : Shift + Ctrl + flèches directionnelles
  • Faire défiler verticalement : Ctrl + flèches haut et bas
  • Déplacer le curseur mot à mot : Ctrl + flèches droite et gauche
  • Indenter une ligne ou plusieurs : Quand une ligne est sélectionnée, Tabulation
  • Dé-indenter une ligne ou plusieurs : Quand une ligne est sélectionnée, Shift+Tabulation
 Prenez l'habitude d'utiliser ces raccourcis, ils accélèrent considérablement la programmation et la rendent moins fastidieuse. Lorsque l'on passe du temps devant un écran, on apprécie des couleurs plus sombres. Notepad++ propose différents styles dans Paramétrage > Configurateur de couleurs syntaxiques (ou si c'est en anglais Settings > Style configurator). Le Thème Bespin est agréable.
Les navigateurs web (firefox, chrome, edge, safari, etc.), dans leur utilisation habituelle, se placent du point de vue de l'utilisateur (internaute). Pourtant ils proposent également des outils de développement très utiles pour les développeurs web (programmeurs) que nous présentons ici. Commencez par vérifier que vous accés à la barre de menus de Firefox (pour accéder aux menus Ficher, Edition, etc.).

Si ce n'est pas le cas, en haut de la fenêtre, faire clic-droit puis Barre de menus. On appelle code source le programme qui est derrière le rendu graphique d'une application. Dans certains langages compilésLangage compilé : un langage qui est, avant de pouvoir l executer, traduit en langage machine (binaire) par un compilateur., le code source est caché. Le HTML, le CSS et le JavaScript sont des langages interprétésLangage interprété : on pourrait dire qu ils sont exécutés au fur et à mesure par l'interpréteur... même si c'est un peu plus complexe. Leur code source est public et accessible par n'importe qui. Pour afficher le code source d'une page web, faire Clic-droit sur la page, puis Code source de la page (cliquer sur le background) ou directement par le raccourci clavier Ctrl+U. Afficher le code source de : Les développeurs web peuvent ainsi facilement s'inspirer du code des autres.... lorsqu'il est lisible. Certains programmeurs facétieux cachent des easter eggs Easter egg : littéralement "oeufs de pacques" : ce sont des messages cachés, souvent amusants dans leur code source comme sur ce site , sous forme d'énigmes. Lorsque l'on programme un site ou qu'on veut s'inspirer du code source d'autres sites, il n'est pas forcément facile de s'y retrouver dans un code parfois complexe. L'inspecteur est un outil qui permet de visualiser le code d'un élément précis de la page. Pour ouvrir l'inspecteur, il y a plusieurs manières :
  • En allant dans le menu Outils puis Développement web, puis Inspecteur
  • En cliquant sur , puis , puis Inspecteur
  • Avec le raccourci clavier Ctrl+Shift+C
  • En faisait Clic-droit sur un élément de la page puis Examiner l'élément
 Inspectez l'image suivante : L'inspecteur est séparé en deux partie :
  • A gauche le HTML : il est possible de modifier n'importe quelle partie. Notamment le texte de la page.
  • A droite la CSS : il est possible de modifier les attributs CSS et d'en ajouter
Cela permet aux développeurs de visualiser directement le rendu de certaines modifications avant de se lancer dans la programmation.

Utilisez l'inspecteur, du côté HTML, pour :
  • Modifier un texte de cet énoncé
  • Mettre ce mot en italique plutôt qu'en gras.
  • Ajouter un élément à cette liste de questions
  • Modifier la largeur de l'image de l'inspecteur plus haut

Utilisez l'inspecteur, du côté CSS, pour :
  • Modifier la taille du texte dans les div de classe consignes
  • Modifier la largeur et la hauteur du logo Google sur la page d'accueil de Google
Lorsque l'inspecteur est ouvert, on peut inspecter les éléments de la page avec la souris (cliquer d'abord sur le bouton ) en les survolant. Cliquer pour bloquer l'élément à inspecter. Inversement, si on clique sur le code d'un élément, celui-ci sera mis en surbrillance dans la page.
Pour une présentation plus approfondie de l'inspecteur, vous pouvez toujours visiter le site officiel.
 La console a plusieurs utilités :
  • Elle affiche les évènements de la page dont les erreurs JavaScript et CSS.
  • Il est possible d'exécuter des commandes JavaScript directement (très utile au développeur qui veut tester des petits morceaux de code).
Pour ouvrir la console, il y a trois manières :
  • En allant dans le menu Outils puis Développement web, puis Console
  • En cliquant sur , puis , puis Console
  • Avec le raccourci clavier Ctrl + Shift + K
  • Lorsque l'inspecteur est déjà ouvert, en cliquant sur l'onglet console .
Nous allons corriger quelques erreurs :
  • Dans le navigateur, revenez sur la page "mon_site.html" et ouvrez la console.
  • Activez l'affichage des erreurs CSS en cochant le bouton CSS dans la console :
  • Corrigez les deux erreurs qui empêchent le titre de s'afficher correctement dans le fichier "mon_style.css".
  • Le message donne la ligne et la colonne de l'erreur. Dans Notepad++ ces informations apparaîssent en bas de la fenêtre (Ln : 346 Col 156)
  • Si vous ne comprenez pas exactement le message d'erreur en anglais, essayez de comparer la ligne qui pose problème avec d'autres lignes du code.
  • Parfois le message indique le premier caractère d'une ligne alors que la vraie erreur est située sur le dernier caractère de la ligne précédente...
  • Les instructions CSS et JavaScript sont en anglais...
Attention, pensez à sauvegarder les fichiers modifiés pour que le résultat apparaîsse dans le navigateur (rafraîchir avec ou en tapant F5) La console comprend aussi une zone de saisie tout en bas pour tester et exécuter des commandes en JavaScript Il est possible d'exécuter des commandes simples ou d'appeler des fonctions contenus dans les scripts JS de la page. L'autocomplétion assiste la saisie. On valide avec Entrée et le résultat s'affiche au dessus. Dans le navigateur, revenez sur la page "mon_site.html" et ouvrez la console. Tapez l'une après l'autre les commandes suivantes : x=6 y=x+1 x y y=x++ x y Lancez une alerte JavaScript en tapant : alert("Attention derrière toi c'est horrible !!"); Le fichier "mon_script.js" contient une fonction BONJOUR(). Appelez cette fonction en tapant dans la console : BONJOUR() Il est aussi possible d'agir sur les éléments de la page avec JS (nous reverrons ça plus tard). Tapez par exemple : document.querySelector("body").style.backgroundColor="red" ou encore : document.getElementById("mon_titre").innerHTML="Un titre bien plus accrocheur"

Vous pouvez vérifier que certaines de ces commandes marcheront sur n'importe quelle page web (affectations, alertes), mais pas toutes. Par exemple, la fonction BONJOUR() vient du fichier "mon_script.js" qui est dans votre dossier personnel. En toute logique, il ne marchera pas sur le site de Google...

La dernière commande ne marchera que si il existe un élément d'id "mon_titre" sur la page web testée...

Certains développeurs facétieux cachent des easter egg en JS qui se révèlent par la console...

C'est dans la console que s'affichent les messages d'erreur lorsqu'un programme JavaScript est bogué : Ca permet au développeur d'avoir des informations sur :
  • le fichier dans lequel se trouve l'erreur (fichier javascript, css, html, ...)
  • le type de l'erreur (faute de frappe, parenthèse manquante, variable inconnue, etc.)
  • le numéro de la ligne et de la colonne de l'erreur (qu'on retrouve dans Notepad++ qui numérote bien ses lignes)
Le fichier "mon_script.js" contient une partie mise en commentaireUne partie d un programme mise en commentaire est ignorée et n est donc pas exécutée. entre les caractères \* et *\. Cette partie contient des erreurs, c'est pourquoi elle a été commentée.
  • Décommentez cette partie du programme (vous pouvez par exemple utiliser Ctrl+Shift+haut-bas pour déplacer le début de la zone de commentaire)
  • En rafraîchissant la page "mon_site.html", allez voir les messages d'erreur dans la console. Attention, il faut cliquer sur le bouton JS pour afficher les erreurs JavaScript :
  • Corrigez les erreurs faites, et relancez pour voir le résultat (indice : "missing" signifie "manquant").
Pour une présentation plus approfondie de la console, vous pouvez toujours visiter le site officiel.
 Le débogueur permet d'avancer pas à pas dans un programme JavaScript pour examiner plus en détail, comprendre ce qui fonctionne mal et le corriger. Pour ouvrir le débogueur, il y a trois manières :
  • En allant dans le menu Outils puis Développement web, puis Débogueur
  • En cliquant sur , puis , puis Débogueur
  • Avec le raccourci clavier Ctrl + Shift + K
  • Lorsque l'inspecteur ou la console sont ouverts, en cliquant sur l'onglet débogueur .
Pour exécuter un programme pas à pas, il faut placer des

points d'arrêts

sur chaque ligne où souhaite que le programme marque une pause :

Sur l'exemple ci-dessus, on peut observer :
  • A gauche le nom du script analysé mon_script.js (il peut y avoir plusieurs choix si il y a plusieurs scripts sur la page web)
  • A droite le script dans son détail mon_script.js. Des points d'arrêts sont placés sur les lignes 23, 24, puis 26 à 28.

Pour ajouter ou enlever un point d'arrêt, il suffit de cliquer sur le numéro de la ligne.

  • Pour avancer jusqu'au prochain point d'arrêt, cliquer sur
  • Pour avancer d'une seule ligne de code, cliquer sur
Le script mon_script.js contient une fonction boucle_test() que nous allons étudier en détail à l'aide du débogueur:
  • Dans la console, exécutez la fonction boucle_test() pour observer son résultat.
  • Rechargez la page, puis dans le débogueur placez des points d'arrêts sur les lignes de l'image précédente.
  • Observez le fonctionnement de la boucle pas à pas, et les changements des variables dans la partie droite du débogueur.
  • En vous inspirant fortement de la fonction boucle_test, créez une fonction boucle_menu() qui modifie le menu de navigation à gauche de la page web pour y ajouter autant de choix que l'on décide : Menu 1, Menu 2, Menu 3 etc.
  • Copier-coller la fonction boucle_test() et l'appeler boucle_menu
  • Il faut sélectionner le menu de navigation qui est un élément <ul> d'id = navbar
  • Il faut ajouter les titre des menus dans dans la liste, entre balises <li> et </li>.
  • Vous pouvez choisir avant la boucle d'affecter la chaîne vide "" à la variable text si vous ne voulez pas laisser le texte "Voici une énumération"
  • Sauvegardez et rechargez la page web pour que Firefox tienne compte des changements apportés à mon_script.js

Pour une présentation plus approfondie du débogueur, vous pouvez toujours visiter le site officiel.

De nombreux détails ont été survolés ou passés sous silence. Le site de mozilla présente les outils de développement plus en profondeur. C'est en les utilisant souvent qu'ils deviennent familiers et intuitifs. D'autres navigateurs proposent des outils de développement. Firefox a l'avantage d'être un navigateur libre et respectueux de la vie privée.

D'autres sites intéressants :